<template>
  <div class="posttable">
    <el-row>
      <el-col :span="24" style="padding-right: 30px;padding-left: 40px;">
        <div class="addform addForm" v-if="form">
          <el-form label-position="top" ref="form" :model="form" :rules="rules">
            <el-row class="change">
              <el-col :span="5">
                <el-form-item prop="company" label="入职公司">
                  <el-input v-model.trim="form.company" placeholder="请输入入职公司" style="width: 274px"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="5" :offset="1">
                <el-form-item prop="department" label="部门">
                  <el-input v-model.trim="form.department" placeholder="请输入部门" style="width: 274px"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="5" :offset="1">
                <el-form-item prop="customer" label="服务客户" style="margin-bottom: 10px;">
                  <el-select
                    v-model="form.customer"
                    placeholder="请选择客户名称"
                    style="width: 274px"
                    @change="postHandler"
                  >
                    <el-option
                      v-for="(item,index) in customerNames"
                      :key="index"
                      :label="item.name"
                      :value="item.name"
                    ></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="5" :offset="1">
                <el-form-item label="职位" prop="position">
                  <el-select v-model="form.position" placeholder="请选择职位">
                    <el-option
                      v-for="(item,index) in positionlist"
                      :key="index"
                      :label="item"
                      :value="item"
                    ></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="5">
                <el-form-item label="姓名" prop="name">
                  <el-input placeholder="请输入姓名" v-model.trim="form.name"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="5" :offset="1">
                <el-form-item label="性别" prop="sex">
                  <el-select v-model="form.sex" placeholder="请选择性别">
                    <el-option
                      v-for="(item,index) in sexlist"
                      :key="index"
                      :label="item"
                      :value="item"
                    ></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="5" :offset="1">
                <el-form-item label="联系方式" prop="phone">
                  <el-input placeholder="请输入联系方式" v-model.trim="form.phone"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="5" :offset="1">
                <el-form-item label="区域" prop="area">
                  <el-select placeholder="请选择区域" v-model="form.area">
                    <el-option
                      v-for="(item,index) in areallist"
                      :key="index"
                      :label="item"
                      :value="item"
                    ></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="5">
                <el-form-item label="毕业时间" prop="graduationTime">
                  <el-date-picker
                    v-model="form.graduationTime"
                    type="month"
                    format="yyyy-MM"
                    value-format="yyyy-MM"
                    placeholder="请选择毕业时间"
                  ></el-date-picker>
                </el-form-item>
              </el-col>
              <el-col :span="5" :offset="1">
                <el-form-item label="入职时间" prop="entryTime">
                  <el-date-picker
                    v-model="form.entryTime"
                    type="date"
                    format="yyyy-MM-dd"
                    value-format="yyyy-MM-dd"
                    placeholder="请选择入职时间"
                    :picker-options="pickerBeginDateBefore"
                  ></el-date-picker>
                </el-form-item>
              </el-col>
              <el-col :span="5" :offset="1">
                <el-form-item label="离职时间" prop="depatureTime">
                  <el-date-picker
                    v-model="form.depatureTime"
                    type="date"
                    format="yyyy-MM-dd"
                    value-format="yyyy-MM-dd"
                    placeholder="请选择离职时间"
                    :picker-options="pickerBeginDateAfter"
                  ></el-date-picker>
                </el-form-item>
              </el-col>
              <el-col :span="5" :offset="1">
                <el-form-item label="试用期" prop="probationPeriod">
                  <el-input v-model.trim="form.probationPeriod" placeholder="请输入试用期"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="5">
                <el-form-item label="补助" prop="subsidy">
                  <el-input v-model.trim="form.subsidy" placeholder="请输入补助"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="5" :offset="1">
                <el-form-item label="薪资(单位(K))" prop="salary">
                  <el-input placeholder="请输入薪资上限" v-model.trim="form.salary"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="5" :offset="1">
                <el-form-item label="薪数" prop="salaryNum">
                  <el-input v-model.trim="form.salaryNum" placeholder="请输入薪数"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="5" :offset="1">
                <el-form-item prop="recommender" label="招聘专员">
                  <el-input
                    v-model.trim="form.recommender"
                    placeholder="请输入招聘专员"
                    style="width: 274px"
                  ></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="5">
                <el-form-item label="离职状态" prop="quitState">
                  <el-select v-model="form.quitState" placeholder="请选择离职状态">
                    <el-option value="自离职" label="自离职"></el-option>
                    <el-option value="辞退" label="辞退"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="5" :offset="1">
                <el-form-item prop="quitReason" label="离职原因" style="margin-bottom: 10px;">
                  <el-input
                    v-model.trim="form.quitReason"
                    placeholder="请输入离职原因"
                    style="width: 274px"
                  ></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-form-item style="margin-top: 20px;">
              <el-button class="save" :disabled="savedis" @click="submitForm('form')">保存</el-button>
              <el-button class="canceL" @click="cancel('form')">取消</el-button>
            </el-form-item>
          </el-form>
        </div>
      </el-col>
    </el-row>

    <el-dialog
      title="错误"
      :visible.sync="errordialogVisible"
      width="30%"
      :before-close="errorinfoClose"
      class="deletedialog"
    >
      <div style="text-align: center">
        <i class="el-icon-warning" style="font-size: 20px;color: #fcb543;">
          <span style="font-size: 16px;color: #333;margin-left: 12px;">{{errorinfo}}!</span>
        </i>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button class="sure" round @click="errorinfoClose">确 定</el-button>
        <el-button round @click="errorinfoClose" class="cancel">取 消</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import axios from "axios";
import moment from "moment";

export default {
  name: "editCustomer",
  props: {
    currentData: {
      type: Object
    },
    radio: {
      type: String
    }
  },
  data() {
    return {
      customerNames: [],
      sexlist: ["男", "女"],
      positionlist: [],
      areallist: [],
      savedis: false,
      cusId: null,
      form: {},
      rules: {
        customer: [
          { required: true, message: "请选择服务客户姓名", trigger: "change" }
        ],
        recommender: [
          { required: true, message: "请输入招聘专员", trigger: "blur" }
        ],
        name: [{ required: true, message: "请输入姓名", trigger: "blur" }],
        sex: [{ required: true, message: "请选择性别", trigger: "blur" }],
        phone: [
          {
            required: true,
            pattern: /(^0\d{2,4}\-\d{7,8}$)|(^1[3|4|5|6|7|8|9][0-9]{9}$)/,
            message: "请输入正确的联系方式",
            trigger: "blur"
          }
        ],
        company: [
          { required: true, message: "请输入入职公司", trigger: "blur" }
        ],
        department: [
          { required: true, message: "请输入部门", trigger: "blur" }
        ],
        position: [
          { required: true, message: "请选择职位", trigger: "change" }
        ],
        area: [{ required: true, message: "请选择区域", trigger: "change" }],
        salary: [
          {
            required: true,
            pattern: /^\d{1,2}$/,
            message: "薪资为0-99的数字",
            trigger: "blur"
          }
        ],
        salaryNum: [
          {
            required: true,
            pattern: /^\d{1,2}$/,
            message: "薪数为0-99的数字",
            trigger: "blur"
          }
        ],
        probationPeriod: [
          { required: true, message: "请输入试用期", trigger: "blur" }
        ],
        subsidy: [{ required: true, message: "请输入补助", trigger: "blur" }],
        graduationTime: [
          { required: true, message: "请选择毕业时间", trigger: "blur" }
        ],
        entryTime: [
          { required: true, message: "请选择入职时间", trigger: "blur" }
        ],
        depatureTime: [
          { required: true, message: "请选择离职时间", trigger: "blur" }
        ],
        quitReason: [
          { required: true, message: "请输入离职原因", trigger: "blur" }
        ],
        quitState: [
          { required: true, message: "请选择离职状态", trigger: "change" }
        ]
      },
      errordialogVisible: false,
      errorinfo: null,
      pickerBeginDateBefore: {
        disabledDate: time => {
          if (this.form.depatureTime) {
            return moment(time.getTime()).format('YYYY-MM-DD') > this.form.depatureTime
          }
        }
      },
      pickerBeginDateAfter: {
        disabledDate: time => {
          if (this.form.entryTime) {
            return moment(time.getTime()).format('YYYY-MM-DD') < this.form.entryTime
          }
        }
      }
    };
  },
  created() {
    //回显数据
    axios
      .post(this.url + "/entryquit/getDetail", {
        id: this.currentData.id + ""
      })
      .then(res => {
        this.unlogin(res.data.code);
        if (res.data.code == 200) {
          if (res.data.data !== null) {
            this.form = res.data.data;
          }
        }
      });

    //获取地区下拉框数据
    axios.get(this.url + "/demand/getAreas").then(res => {
      this.unlogin(res.data.code);
      if (res.data.code == 200) {
        this.areallist = res.data.data;
      }
    });
    //获取客户名称下拉框数据
    axios.post(this.url + "/resumeUpload/getCustomerNames").then(res => {
      this.unlogin(res.data.code);
      if (res.data.code == 200) {
        this.customerNames = res.data.data;
        //获取职位
        this.cusId = "";
        for (var i = 0; i < this.customerNames.length; i++) {
          if (this.form.customer == this.customerNames[i].name) {
            this.cusId = this.customerNames[i].id;
          }
        }
        this.positionlist = [];
        axios
          .post(this.url + "/demand/getPostNameByCustomerId", {
            customerId: this.cusId + ""
          })
          .then(res => {
            this.unlogin(res.data.code);
            if (res.data.code == 200) {
              this.positionlist = res.data.data;
            }
          });
      }
    });
  },
  methods: {
    //选择客户名称获取职位名称的下拉框数据
    postHandler() {
      this.cusId = "";
      for (var i = 0; i < this.customerNames.length; i++) {
        if (this.form.customer == this.customerNames[i].name) {
          this.cusId = this.customerNames[i].id;
        }
      }
      this.form.position = "";
      this.positionlist = [];
      axios
        .post(this.url + "/demand/getPostNameByCustomerId", {
          customerId: this.cusId + ""
        })
        .then(res => {
          this.unlogin(res.data.code);
          if (res.data.code == 200) {
            this.positionlist = res.data.data;
          }
        });
    },
    submitForm(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          this.savedis = true;
          axios
            .post(this.url + "/entryquit/upQuitDetail", this.form)
            .then(res => {
              this.unlogin(res.data.code);
              if (res.data.code === 200) {
                if (res.data.message == "success") {
                  this.savedis = false;
                  this.$emit("getData");
                }
                if (res.data.message == "存在此人信息") {
                  this.savedis = false;
                  this.errorinfo = res.data.message;
                  document.documentElement.style.overflow = "hidden";
                  this.errordialogVisible = true;
                }
              }
              this.$refs.form.resetFields();
            });
        }
      });
    },
    cancel(formName) {
      this.savedis = false;
      this.$refs[formName].resetFields();
      this.$emit("getData");
    },
    //清除所有的校验信息
    resetFields(formName) {
      this.$refs[formName].resetFields();
    },
    errorinfoClose() {
      this.errorinfo = null;
      document.documentElement.style.overflow = "auto";
      this.errordialogVisible = false;
    }
  }
};
</script>
<style scoped>
.addform {
  color: #333 !important;
}

.storage {
  width: 150px;
  height: 40px;
  font-size: 16px;
  color: #4e72f3;
  border-radius: 4px;
  margin-right: 43px;
  border-color: #4e72f3;
}

.save {
  width: 150px;
  height: 40px;
  font-size: 16px;
  color: #fff;
  border-radius: 4px;
  margin-right: 43px;
  background: linear-gradient(to bottom, #5696f8 0%, #4e6ef5 100%);
}

.canceL {
  width: 150px;
  height: 40px;
  border: 1px solid #4e6ef5;
  font-size: 16px;
  font-weight: 500;
  color: #4e6ef5;
}

.upload {
  width: 194px;
  height: 44px;
  margin-top: 10px;
  /*margin-bottom: 30px;*/
}

.pager {
  width: 100%;
  overflow: hidden;
  position: relative;
  margin-top: 10px;
  margin-bottom: 10px;
}

.el-pagination {
  margin-left: 50%;
  transform: translateX(-50%);
}
</style>
